// 引入CountUI组件到容器中
import CountUI from "../../components/Count/Count";
// connect连接UI组件与redux
import { connect } from "react-redux";

import {
  createAddAction,
  createDeleteAction,
  createAsyncAddAction,
} from "../../redux/count_action";

/**
 * 1、mapStateToProps函数返回一个对象
 * 2、返回的对象中key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3、mapStateToProps用于传递状态
 */
function mapStateToProps(store) {
  return {
    count: store,
  };
}

/**
 * 1、mapDispatchToProps函数返回一个对象
 * 2、返回的对象中key就作为传递给UI组件props的key，value就作为传递给UI组件props的value
 * 3、mapDispatchToProps用于传递操作状态的方法
 */
function mapDispatchToProps(dispatch) {
  return {
    add: (data) => dispatch(createAddAction(data)),
    delete: (data) => dispatch(createDeleteAction(data)),
    asyncAdd: (data, delay) => dispatch(createAsyncAddAction(data, delay)),
  };
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI);
